Interstitial Image

interstitialImage is introduced to handle new onboarding templates that use interstitial image designs added to that Fimga file here.

That template handles two positions of the image added to it: top and bottom. It also supports showing the logo and back button.

Example of a template with imagePosition: top

  {
      "type": "interstitialImage",
      "stepId": "interstitialImage_7",
      "title": "Thanks for sharing.",
      "subtitle": "You are not alone. IBS affects 10-15% of the world’s population and between 30-40% of people have bowel problems at some point. Many people manage digestive symptoms without ever receiving a formal diagnosis.",
      "backgroundColor": "#FFF4EE",
      "imageUrl": "https://c.thefab.co/web-onboarding/shape/thank-you-for-sharing.webp",
      "textColor": "#251C93",
      "ctaText": "Continue",
      "ctaColor": "#FFF",
      "ctaBackgroundColor": "#3425B8",
      "ctaHoverBackgroundColor": "#2A1E93",
      "backButtonColor": "#FFA133",
      "backButtonBackgroundColor": "#FFF",
      "backButtonText": "Back",
      "maxWidth": "434px",
      "imagePosition": "top",
      "logoWithProgressBar": {
          "type": "gradient",
          "logoImage": "https://www.thefabulous-staging.co/images/shape-logo.png",
          "logoWidth": "126px",
          "logoWidthMobile": "102px",
          "logoHeight": "40px",
          "logoHeightMobile": "32px",
          "progressBarBackground": "linear-gradient(270deg, #8CDBDF 15.63%, #251C93 83.85%)"
      }
},

Key	Notes
`type`	`interstitialImage`
`stepId`	Unique step id
`title`	Optional
`subtitle`	Optional
`paragraph`	Optional
`animatedText`	(Optional) It’s an array of animated paragraphs `"animatedText": [` `"Mental health (stress, anxiety) disrupts gut motility and function. Gut health produces serotonin which impacts mental health.",` `"Many solutions to IBS and digestive issues target symptoms, but they don’t address the underlying triggers.",` `"Do you know why eating certain foods is a common trigger of symptoms?"` `]` This will show the paragraphs one after the other.
`useHTML`	The default of this key is `false` and it should be set to `true` when `title`, `subtitle`, `paragraph`, or `animatedText` should support HTML. Example of a title that supports HTML: `"title": "<span class='font-kalam' style='color:#EC9900;'>Consistency is key.</span>",`
`backgroundColor`	The pages' background color.
`imageUrl`	The link to the image of that template
`lottieUrl`	It accept a `.json` link to show lottie files instead of images.
`maxWidth`	Max width of the image on desktop
`imagePosition`	It could be `top` (to show the image before the title and subtilie) or `bottom` (to sow the image after the title and subtitle)
`textColor`	The main textColor on the page
`ctaText`	The text of the main button
`ctaColor`	The text color of the main button
`ctaBackgroundColor`	The background color of the main button
`ctaHoverBackgroundColor`	The background of the main button on hovering.
`backButtonText`	The text of the back button
`backButtonColor`	The text color of the back button
`backButtonBackgroundColor`	The background color of the back button

Examples

Since the title, subtitle, and paragraph are optional in that template, we can omit any of these to support some of the steps in the figma file.

A template with only the title added and the imagePosition is top.
A template with all a title, subtitle, and a paragraph added, and the imagePosition is bottom.
A template with only the title added and the imagePosition is top.
A template that supports HTML with Kalam font.

useHTML: true

  {
      "type": "interstitialImage",
      "stepId": "interstitialImage_4",
      "title": "<span class='font-kalam' style='color:#EC9900;'>Consistency is key.</span>",
      "subtitle": "And we’ve made it easy! Our sessions are less than 15 minutes long to easily fit into your schedule.",
      "backgroundColor": "#FFF4EE",
      "useHTML": true,
      "imageUrl": "https://c.thefab.co/web-onboarding/shape/43-yellow-key.png",
      "textColor": "#251C93",
      "ctaText": "I Want to Succeed",
      "ctaColor": "#FFF",
      "ctaBackgroundColor": "#3425B8",
      "ctaHoverBackgroundColor": "#2A1E93",
      "backButtonColor": "#FFA133",
      "backButtonBackgroundColor": "#FFF",
      "backButtonText": "Back",
      "maxWidth": "194px",
      "imagePosition": "top",
      "logoWithProgressBar": {
          "logoImage": "https://www.thefabulous-staging.co/images/shape-logo.png",
          "logoWidth": "126px",
          "logoWidthMobile": "102px",
          "logoHeight": "40px",
          "logoHeightMobile": "32px",
          "progressBarBackground": "linear-gradient(270deg, #8CDBDF 15.63%, #251C93 83.85%)"
      }
  },

A template that supports HTML with Kalam font and animatedText

useHTML: true and animatedText is set

  {
      "type": "interstitialImage",
      "stepId": "interstitialImage_1",
      "backgroundColor": "#FFF4EE",
      "imageUrl": "https://c.thefab.co/web-onboarding/shape/1-dancing.png",
      "textColor": "#251C93",
      "ctaText": "Continue",
      "useHTML": true,
      "ctaColor": "#FFF",
      "shouldFadeIn": false,
      "animatedText": [
          "If the mind is anxious, your body tenses up. The dance is out of step and digestion stumbles into bloating or constipation. </br></br> <span class='font-kalam' style='color:#FF464A; font-size:24px'>IBS can flare up.</span>",
          "If the gut is unwell, it can impact your mind. The dance is again out of step, stumbling into stress or depression.",
          "When you don’t take care of both your mental health and your gut health, it triggers or worsens symptoms.",
          "This creates a downward spiral between <span<span class='font-kalam' style='color:#FF464A;'>your gut and mental health.</span>"
      ],
      "ctaBackgroundColor": "#3425B8",
      "ctaHoverBackgroundColor": "#2A1E93",
      "backButtonColor": "#FFA133",
      "backButtonBackgroundColor": "#FFF",
      "backButtonText": "Back",
      "maxWidth": "280px",
      "imagePosition": "top",
      "logoWithProgressBar": {
          "logoImage": "https://www.thefabulous-staging.co/images/shape-logo.png",
          "logoWidth": "126px",
          "logoWidthMobile": "102px",
          "logoHeight": "40px",
          "logoHeightMobile": "32px",
          "progressBarBackground": "linear-gradient(270deg, #8CDBDF 15.63%, #251C93 83.85%)"
      }
  },

Examples​

Examples